<template>
  <el-container>
    <el-header style="background-color: white;color: #000000;">
      <h1 align="center">题库管理</h1>

    </el-header>
    <el-main>
      <!-- 行内表单 -->
      <el-form :model="queryParam" :inline="true" class="demo-form-inline" label-width="100px">
        <el-form-item label="题目">
          <el-input v-model="queryParam.quContent"></el-input>
        </el-form-item>
        <el-form-item label="题型">
          <el-select v-model="queryParam.quType">
            <el-option value="" label="--请选择题型--"></el-option>
            <el-option value="单选题" label="单选题"></el-option>
            <el-option value="多选题" label="多选题"></el-option>
            <el-option value="判断题" label="判断题"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="mini" @click="queryByPage()">查询</el-button>
          <el-button type="success" size="mini" @click="add()">新增</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格组件 -->
      <el-table :data="list" style="width: 100%;">
        <!-- 列表签 -->
        <el-table-column prop="quId" label="编号" width="100px"></el-table-column>
        <el-table-column prop="quContent" label="题目" width="400px"></el-table-column>
        <el-table-column prop="quType" label="题型" width="100px"></el-table-column>
        <el-table-column prop="quScore" label="分数" width="100px"></el-table-column>
        <el-table-column prop="quAnswer" label="答案" width="100px"></el-table-column>
        <el-table-column prop="createTime" label="修改时间" width="200px"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="update(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row.quId)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="block">
        <!-- size-change: 下拉框选中事件触发的函数；-->
        <!-- current-change：页码、上一页和下一页触发的事件 -->
        <!-- current-page： 当前页的页码 -->
        <!-- page-sizes：下拉框选中行数的集合 -->
        <!-- page-size：每页显示条数 -->
        <!--layout：分页页面布局 -->
        <!-- total：总条数 -->

        <el-pagination @size-change="sc" @current-change="cc" :current-page="queryParam.page"
          :page-sizes="[5, 10, 20, 30]" :page-size="queryParam.row" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <!-- 对话框 -->
      <el-dialog :title="title" :visible.sync="isShow" width="50%">
        <!-- 表单组件 -->
        <el-form :model="formData" label-width="100px">
          <el-form-item label="题目">
            <el-input v-model="formData.quContent"></el-input>
          </el-form-item>
          <el-form-item label="题型">
            <el-select v-model="formData.quType">
              <el-option value="单选题" label="单选题"></el-option>
              <el-option value="多选题" label="多选题"></el-option>
              <el-option value="判断题" label="判断题"></el-option>
            </el-select>
          </el-form-item>
          <template v-if="formData.quType!='判断题'">
            <el-form-item label="A选项">
              <el-input v-model="formData.quAoption"></el-input>
            </el-form-item>
            <el-form-item label="B选项">
              <el-input v-model="formData.quBoption"></el-input>
            </el-form-item>
            <el-form-item label="C选项">
              <el-input v-model="formData.quCoption"></el-input>
            </el-form-item>
            <el-form-item label="D选项">
              <el-input v-model="formData.quDoption"></el-input>
            </el-form-item>
          </template>
          <el-form-item label="分数">
            <el-input-number v-model="formData.quScore" :min="1" :max="10"></el-input-number>

          </el-form-item>
          <el-form-item label="答案">
            <template v-if="formData.quType=='多选题'">
              <input type="checkbox" value="A" v-model="qs" />A
              <input type="checkbox" value="B" v-model="qs" />B
              <input type="checkbox" value="C" v-model="qs" />C
              <input type="checkbox" value="D" v-model="qs" />D
            </template>
            <template v-else-if="formData.quType=='单选题'">
              <input type="radio" value="A" v-model="formData.quAnswer" />A
              <input type="radio" value="B" v-model="formData.quAnswer" />B
              <input type="radio" value="C" v-model="formData.quAnswer" />C
              <input type="radio" value="D" v-model="formData.quAnswer" />D
            </template>
            <template v-else>
              <input type="radio" value="√" v-model="formData.quAnswer" />√
              <input type="radio" value="×" v-model="formData.quAnswer" />×
            </template>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="mini" @click="save()">保存</el-button>
            <el-button type="primary" size="mini" @click="black()">取消</el-button>
          </el-form-item>

        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "questionManager",
    data() {
      return {
        title: "修改", //对话框标题
        isShow: false, //控制对话框是否显示
        list: [], //当前页面集合
        total: 0, //总条数
        totalPage: "", //总页数
        queryParam: { //查询参数
          page: 1,
          row: 5,
          quContent: "",
          quType: ""
        },
        qs: [], //答案数组
        formData: { //表单数据
          quId: null,
          quContent: "",
          quAoption: "",
          quBoption: "",
          quCoption: "",
          quDoption: "",
          quType: "",
          quScore: "",
          quAnswer: ""

        },

      }

    },
    methods: { //查询分页
      queryByPage() {
        var self = this;
        this.$http.get("/paperQuestion/queryQuetionByPage", {
          params: this.queryParam,
        }).then(function(rs) {
          if (rs.data.success) {
            //赋值当前页
            self.list = rs.data.data.list;
            //赋值总条数
            self.total = rs.data.data.total;
            //赋值总页数
            self.totalPage = rs.data.data.totalPage;


          }

        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })
      },
      sc(row) { //下拉框触发
        this.queryParam.row = row;
        //刷新
        this.queryByPage();
      },
      cc(page) { //页码触发事件
        this.queryParam.page = page;
        //刷新
        this.queryByPage();
      },
      update(row) { //修改
        //显示对话框
        this.isShow = true;
        //更改标题
        this.title = "修改";
        //数据回显
        this.formData = row;
        //判断数据类型,多选题的数据回显
        if (row.quType == "多选题") {
          //清空qs
          this.qs = [];
          for (var i = 0; i < row.quAnswer.length; i++) {
            this.qs.push(row.quAnswer[i]);
          }
        }

        console.log(row);
      },
      add() { //打开一个新的窗口
        this.isShow = true;
        //更改标题
        this.title = "新增";
        //清空表单
        this.formData = {};
        this.qs = [];

      },
      save() { //保存
        var url = "";
        if (this.title == "新增") {
          url = "/paperQuestion/add";

        } else {
          // url="/paperQuestion/update";
        }
        //如果是多选题
        if (this.formData.quType == "多选题") {
          //清空
          this.formData.quAnswer = "";
          //取出qs的值，赋值给quAnswer
          for (var i = 0; i < this.qs.length; i++) {
            this.formData.quAnswer += this.qs[i];
          }
        }
        var self = this;
        this.$http.get(url, {
          params: this.formData,
        }).then(function(rs) {
          self.$message(rs.data.data);
          if (rs.data.success) {
            //关闭对话框
            self.isShow = false;
            //刷新
            self.queryByPage();

          }

        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })
      },
      black() {
        //关闭对话框
        this.isShow = false;
        //



      },
      del(row) {

        var self = this;
        this.$http.post("/paperQuestion/del",
         this.$qs.stringify({
           "id":row
         })).then(function(rs) {
          self.$message(rs.data.info);
          if (rs.data.success) {

            //刷新
            self.queryByPage();

          }

        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })
      },



    },
    mounted() {
      this.queryByPage();
    }

  }
</script>

<style>
</style>
